<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting, Plus, CirclePlus, Shop,
} from '@element-plus/icons-vue'
import {nextTick, onMounted, ref, watch} from "vue";
import router from "@/router";
import {getCurMerchant} from "@/api/merchant";
import {ElMessageBox} from "element-plus";
import {getStoreListByMerchantId} from "@/api/store";
import StoreManageDetails from "@/views/merchant/StoreManageDetails.vue";
import {onBeforeRouteUpdate, useRoute} from 'vue-router';

const route = useRoute();
const curMerchant = ref({})

const storeList = ref([]) // 店铺列表，以店铺对象为元素的数组
const activeStoreId = ref(null) // 当前选中的店铺ID

// 获取当前商家信息，然后接着查询商家的店铺
const getCurMerchantInfoWithStores = () => {
  console.log("123456789")
  getCurMerchant().then(res => {
    console.info("当前登录的商家信息：", res.data);
    if (res.data) {
      curMerchant.value = res.data
      // console.info("curMerchant.value: ", curMerchant.value);
      getStoreListByMerchantId(curMerchant.value.id).then(res => {
        // console.log('curMerchant.value.id:', curMerchant.value.id);
        // console.log('res:', res);
        // console.log('res.data:', res.data);
        storeList.value = res.data;
        // console.log('storeList.value[1]: ', storeList.value[1])
        // 如果有店铺数据，默认选中第一个店铺
        router.push({path: `/merchant/storeManageList/${storeList.value[0].id}`})
        // if (route.params.id) {
        //   activeStoreId.value = parseInt(route.params.id)
        // }
        // // 如果没有店铺ID且店铺列表不为空，跳转到第一个店铺
        // else if (storeList.value.length > 0) {
        //   activeStoreId.value = storeList.value[0].id
        //   router.push({path: `/merchant/storeManageList/${activeStoreId.value}`})
        // }
      })
    } else {
      ElMessageBox.alert('请先登录商家账号', '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        router.push({path: '/merchantLoginPage'})
      })
    }
  })
}
onMounted(() => {
  getCurMerchantInfoWithStores()
})

// 监听路由变化更新选中店铺
watch(() => route.params.id, (newId) => {
  if (newId) {
    activeStoreId.value = parseInt(newId)
  }
})

// 由菜单项选中店铺
const selectStore = (id) => {
  // 如果点击的是当前已选中的店铺，强制刷新
  if (activeStoreId.value === id) {
    router.replace({ path: '/merchant/storeManageList' }).then(() => {
      nextTick(() => {
        router.push({ path: `/merchant/storeManageList/${id}` })
      })
    })
  } else {
    router.push({ path: `/merchant/storeManageList/${id}` })
  }
  activeStoreId.value = id
}

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

const LaunchAStore = () => {
  // 跳转到开店页面
  router.push({path: '/merchant/launchStorePage'})
}

</script>

<template>
  <el-card class="page-container">
    <template v-if="storeList.length > 0">
      <div class="main-layout">
        <!--  左侧导航栏  -->
        <el-aside width="250px">
          <div class="el-aside__logo">
            <span>我的店铺</span>
          </div>
          <el-menu
              :default-active="activeStoreId ? activeStoreId.toString() : ''"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
          >
            <el-menu-item
                v-for="item in storeList"
                :key="item.id"
                :index="item.id.toString()"
                @click="selectStore(item.id)"
            >
              <el-icon><Shop /></el-icon>
              <span>{{ item.name }}</span>
            </el-menu-item>
            <el-menu-item @click="LaunchAStore">
              <el-icon><CirclePlus /></el-icon>
              <span>新开店铺</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!--  右侧主区域  -->
        <el-main>
          <router-view :key="$route.params.id || 'default'"></router-view> <!-- 这里会显示嵌套的子路由组件 -->
        </el-main>
      </div>
    </template>
    <template v-else>
      <el-empty description="您还没有店铺哦~">
        <el-button
            type="primary"
            @click="LaunchAStore"
        >
          我要开店
        </el-button>
      </el-empty>
    </template>
  </el-card>
</template>

<style scoped lang="scss">

.page-container {
  height: 99%;
}

.main-layout {
  display: flex;
  height: 100%;
}

.empty-message {
  text-align: center;
  color: #999;
  padding: 20px;
}

.el-aside {
  background-color: #ffffff;
  height: 800px;

  &__logo {
    height: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }

  .el-menu {
    border-right: none;
  }
}

.el-main {
  padding: 0;
  background-color: #ffffff;
}
</style>
